<template>
  <div class="index">
    <!-- 头部 -->
    <div class="index-head">
      <el-row>
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
          <div class="index-head-left">
            <el-avatar
              class="index-head-left-avatar"
              :src="$host + userInfo.avatar"
            ></el-avatar>
            <div class="index-head-left-text">
              <div>
                <span>{{ getTimeState }}</span>
                <span class="primary-color">{{ userInfo.nickName }}，</span>
                <span>{{ welcome }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
          <div class="index-head-centent-right">
            <div class="index-head-centent-right-list">
              <div class="index-head-centent-right-list-icon">
                可用余额
              </div>
              <div class="index-head-centent-right-list-text">
                ￥{{ userInfo.balance || '00.00' }}
              </div>
            </div>
            <div class="index-head-centent-right-list">
              <div class="index-head-centent-right-list-icon">
                待结算余额
              </div>
              <div class="index-head-centent-right-list-text">
                ￥{{ userInfo.settlement || '00.00' }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 图标 -->
    <div class="index-centent">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
          <!-- 项目 -->
          <div class="grid-content">
            <div class="index-centent-title">
              <div class="index-centent-title-left">
                <svg-icon icon="sort" class="index-centent-title-left-icon" />
                今日数据总览
              </div>
            </div>
            <div class="index-centent-box" style="padding: 0">
              <project-box />
            </div>
          </div>
          <div class="grid-content">
            <el-tabs v-model="activeName">
              <el-tab-pane label="日成交金额" name="amount">
                <v-charts :option="amountChart" style="width: 100%;height: 330px" autoresize></v-charts>
              </el-tab-pane>
              <el-tab-pane label="日成交单数" name="order">
                <v-charts :option="orderChart" style="width: 100%;height: 330px" autoresize></v-charts>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="grid-content">
            <div class="index-centent-title">
              <div class="index-centent-title-left">
                今日代收成功率统计
              </div>
            </div>
            <div>
              <el-select v-model="realTimeType" style="width: 200px;margin: 20px;margin-bottom: -10px">
                <el-option v-for="item in realTimeTypeList" :value="item.value" :label="item.label"></el-option>
              </el-select>
              <v-charts :option="realTimeChart" style="width: 100%;height: 330px" autoresize></v-charts>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="grid-content">
            <div class="index-centent-title">
              <div class="index-centent-title-left">
                <svg-icon
                  icon="operating"
                  class="index-centent-title-left-iconthree"
                />
                快捷操作
              </div>
              <div class="index-centent-title-right">
                <!-- 全部动态 -->
              </div>
            </div>
            <div class="index-centent-box">
              <FastBox />
            </div>
          </div>
          <div class="grid-content">
            <div class="index-centent-title">
              <div class="index-centent-title-left">
                <svg-icon
                    icon="dynamic"
                    class="index-centent-title-left-icontwo"
                />
                最新通知 (6)
              </div>
              <div class="index-centent-title-right">
                更多
              </div>
            </div>
            <div class="index-centent-box">
              <Notice />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ProjectBox from "./component/project";
import FastBox from "./component/fast";
import Notice from "./component/notice.vue";
export default {
  data() {
    return {
      welcome: "欢迎使用人力资源服务平台！",
      loginInfo: {
        ip: '104.225.152.182',
        address: '洛杉矶',
        loginTime: '2024-10-21 09:53:52'
      },
      activeName: 'amount',
      amountChart:{
        legend: {
          icon: 'roundRect',
          top: '5%',
          right: '5%',
          itemWidth: 20,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '15%',
          left: '2%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '2024-01-01',
              '2024-02-02',
              '2024-03-03',
              '2024-04-04',
              '2024-05-05',
              '2024-06-06',
              '2024-07-07'
            ],
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#666',
                align: 'right'
              },
              // 默认x轴字体大小
              fontSize: 12,
              margin: 10,
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              color: '#666'
            },
            axisTick: {
              show: false
            },
          },
        ],
        series: [
          {
            name: '收款',
            type: 'line',
            data: [
                10000,
                20000,
                50000,
                10000,
                30000,
                10000,
                0,
            ],
            symbol: 'emptyCircle',
            symbolSize: 8,
            smooth: true,
            yAxisIndex: 0,
            showSymbol: true,
            lineStyle: {
              color: '#0960bd',
            },
          },
          {
            name: '付款',
            type: 'line',
            data: [
                50000,
                60000,
                70000,
                10000,
                20000,
                30000,
            ],
            symbol: 'emptyCircle',
            symbolSize: 8,
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              color: '#0960bd',
            },
          },
        ]
      },
      orderChart:{
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          left: '2%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '2024-01-01',
              '2024-02-02',
              '2024-03-03',
              '2024-04-04',
              '2024-05-05',
              '2024-06-06',
              '2024-07-07'
            ],
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: '#666',
                align: 'right'
              },
              // 默认x轴字体大小
              fontSize: 12,
              margin: 10,
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              color: '#666'
            },
            axisTick: {
              show: false
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            itemStyle: {
              color: '#0960bd',
            },
            barWidth: '20',
            data: [
              10000,
              20000,
              50000,
              10000,
              30000,
              10000,
              0,
            ],
          },
        ]
      },
      // 实时收款折线图
      realTimeChart: {
        legend: {
          icon: 'roundRect',
          top: '5%',
          right: 'center',
          itemWidth: 20,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
                '10-24 00:00',
                '10-23 23:00',
                '10-23 22:00',
                '10-23 21:00',
                '10-23 20:00',
                '10-23 19:00',
                '10-23 18:00',
            ],
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: '#666',
                align: 'right'
              },
              // 默认x轴字体大小
              fontSize: 12,
              margin: 10,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '成功率',
            color: '#ed4169',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ed4169'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              color: '#ed4169',
              formatter: '{value}%',
            },
            axisTick: {
              show: false
            },
          },
          {
            type: 'value',
            name: '单量',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0960bd'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              color: '#0960bd'
            },
            axisTick: {
              show: false
            },
          },
        ],
        series: [
          {
            name: '成功率',
            type: 'line',
            data: [
              1,
              0.5,
              0.8,
              0.9,
              0.7,
              0.6,
              0.5,
                0
            ],
            symbol: 'emptyCircle',
            symbolSize: 8,
            smooth: true,
            yAxisIndex: 0,
            showSymbol: true,
            lineStyle: {
              color: '#ed4169',
            },
          },
          {
            name: '单量',
            type: 'line',
            yxAixIndex: 1,
            data: [
              10000,
              20000,
              50000,
              10000,
              30000,
              10000,
              0,
            ],
            symbol: 'emptyCircle',
            symbolSize: 8,
            smooth: true,
            yAxisIndex: 1,
            showSymbol: true,
            lineStyle: {
              color: '#0960bd',
            },
          },
        ]
      },
      realTimeType: '',
      realTimeTypeList: [
        {
          value: '',
          label: '当日'
        },
          // 收银台Paytm\收银台PhonePe\收银台GPay\收银台QRCode
        {
          value: 60,
          label: '近1小时'
        },
        {
          value: 30,
          label: '近30分钟'
        },
        {
          value: 15,
          label: '近15分钟'
        },
      ]
    };
  },
  components: {
    Notice,
    FastBox,
    ProjectBox,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapState("theme", ["PC"]),
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 随机下标
      let index = Math.floor(Math.random() * 6);
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好!`;
      } else if (hours > 10 && hours <= 14) {
        state = `中午好!`;
      } else if (hours > 14 && hours <= 18) {
        state = `下午好!`;
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好!`;
      }
      return state;
    },
  },
};
</script>

<style lang="scss">
.index {
  width: 100%;
  min-height: 100%;
  &-head {
    padding: 30px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdfe6;
    background: rgba(255, 255, 255, 0.7);
    &-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &-avatar {
        flex-shrink: 0;
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }
      &-text {
        color: #606266;
        > div:first-child {
          font-weight: 600;
          font-size: 18px;
          color: #292929;
          padding: 0;
          letter-spacing: 0.1em;
          margin: 0;
          margin-bottom: 7px;
          span {
            margin-right: 3px;
          }
        }
      }
    }
  }
}
.index-head-centent-left {
  width: 100%;
  height: 70px;
  display: flex;
}
.index-head-centent-left-text {
  height: 56px;
}
.index-head-centent-left-text p:nth-child(1) {
  font-size: 20px;
  color: #292929;
  letter-spacing: 0.1em;
}
.index-head-centent-left-text p:nth-child(2) {
  font-size: 12px;
  color: #999999;
  letter-spacing: 0.1em;
}
.index-head-centent-right {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-right: 20%;
}
.index-head-centent-right-list {
  height: 56px;
  cursor: pointer;
}
.index-head-centent-right-list-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  color: #808695;
}
.index-head-centent-right-list-icon-is {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-right: 5px;
  padding: 5px;
  border-radius: 12px;
}

.index-head-centent-right-list-text {
  height: 32px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
  font-size: 24px;
}
.index-centent {
  width: 100%;
  min-height: 100%;
  padding: 25px;
  box-sizing: border-box;
}

.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #ffffff;
  width: 100%;
  margin-bottom: 25px;
  .el-tabs__item {
    padding-left: 15px !important;
  }
}
.index-centent-title {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 15px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 14px;
}
.index-centent-title-left {
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  /* border-radius: 11px;
    overflow: hidden; */
}
.index-centent-title-left-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #0960bd;
  padding: 5px;
  background: #e6f3fe;
  /* border-radius: 11px; */
  fill: currentColor;
  margin-right: 10px;
}
.index-centent-title-left-icontwo {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #f371fa;
  padding: 5px;
  background: #fdf4fd;
  /* border-radius: 11px; */
  fill: currentColor;
  margin-right: 10px;
}
.index-centent-title-left-iconthree {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #fc1d1d;
  padding: 5px;
  background: #fdf4fd;
  /* border-radius: 11px; */
  fill: currentColor;
  margin-right: 10px;
}
.index-centent-title-left-iconfour {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #18b2fa;
  padding: 5px;
  background: #fdf4fd;
  /* border-radius: 11px; */
  fill: currentColor;
  margin-right: 10px;
}
.index-centent-title-right {
  color: #3ca0fd;
  cursor: pointer;
}
.index-centent-box {
  width: 100%;
  padding: 15px 15px 0;
  box-sizing: border-box;
}
@media screen and (max-width: 750px) {
  .index {
    &-head {
      &-left-avatar {
        display: none;
      }
    }
    &-centent {
      padding: 8px;
    }
  }
}
</style>
